<template>
	<view class="downLoadBox">
		<view class="downLoadBack">
			<view class="downloadIcon">
				<image src="/static/images/wtgAPP.png"></image>
			</view>
		</view>
		<view class="downLoadTxt">让健康美丽智慧惠及每个人</view>
		<view class="downLoad_back">
			<view>
				<view class="openButton" @click="openApp">点击下载维特购APP</view>
				<view class="viewButton" @click="downPageFunc">继续浏览网页版</view>
				<view class="IOSTxt" style="line-height:100rpx;color:#666;"><text style="color:#f00;margin-right:20rpx;">*</text>IOS版本近期上线</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view v-show="hintShow" class="hint" @click="hintShow = false">
			<view>点击右上角<text class="iconfont icon-gengduo"></text></view>
			<view>选择 在浏览器 打开</view>
			<view>点击“点击下载维特购APP”进行下载</view>
		</view>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		getAppConfig
	} from '@/api/user';
	export default {
		data() {
			return {
				phoneHeight: 0,
				hintShow: false,
			}
		},
		onLoad() {},
		onReady() {
			// 计算屏幕剩余高度  填补剩余高度
			let _this = this;
			console.log("onReady");
			console.log("cccccc");
			uni.getSystemInfo({
				success(e) {
					_this.phoneHeight = e.windowHeight;
					// #ifdef H5
					/* 窗口宽度大于420px且不在PC页面且不在移动设备时跳转至 PC.html 页面 */
					if (e.windowWidth > 500 && !window.top.isPC && !/iOS|Android/i.test(e.system)) {
						window.location.pathname = '/static/html/downloadPage.html';
					}
					// #endif
				}
			});
		},
		
		methods: {
			//浏览网页版
			downPageFunc() {
				// #ifdef H5
				uni.getSystemInfo({
					success(e) {
						if (window.innerWidth < 500) {
							top.location.pathname = '/';
						}
					}
				});
				// #endif
				//#ifdef APP-PLUS  
				uni.switchTab({
					url: "/pages/index/index",
					animationType: 'none',
					animationDuration: 0,
					fail(err) {
						uni.redirectTo({
							url: "/pages/index/index"
						})
					}
				})
				//window.location.pathname = '/';
				// #endif
			},
			openApp() {
				console.log("打开");
				// #ifdef H5
				var UA = navigator.userAgent.toUpperCase();
				let that = this;
				if (UA.indexOf("ANDROID") != -1) { //安卓手机
					//创建iframe
					var ifr = document.createElement("iframe");
					//iframe设置为app的协议打开方式地址
					ifr.src = "weteg://params"; //安卓协议启动地址
					ifr.style.display = "none"; //隐藏
					var t = Date.now(); //取当前时间戳
					//延迟执行iframe 实现访问app协议打开app
					setTimeout(function() {
						document.body.appendChild(ifr);
					}, 96);
					//延迟执行 如果1s没响应，就表示你手机中没有该app。就可以去下载了
					setTimeout(function() {
						let ua = window.navigator.userAgent.toLowerCase()
						if (ua.match(/MicroMessenger/i) == 'micromessenger') {
							that.hintShow = true;
						} else {
							if (Date.now() - t < 1200) {
								document.body.appendChild(ifr);
								getAppConfig().then((res) => {
									let downLoad=res.data.url;
									//let downLoad="https://bfdl-legou.oss-cn-beijing.aliyuncs.com/app/%E7%BB%B4%E7%89%B9%E8%B4%AD1_0_0.apk";
									location.href = downLoad;
								})
								//let downLoad="https://bfdl-legou.oss-cn-beijing.aliyuncs.com/app/%E7%BB%B4%E7%89%B9%E8%B4%AD1_0_0.apk";
								//location.href = downLoad;
							}
						}
					}, 1001);
				} //如果是ios浏览器(safari、UA浏览器、QQ浏览器等)
				else if (UA.indexOf("IOS") != -1 || UA.indexOf("IPHONE") != -1) {
					var t = Date.now(); //取当前时间戳
					setTimeout(function() {
						that.$util.Tips({
							title: "IOS版本近期上线"
						})
					}, 1001);
					//延迟直接跳转唤起app协议地址
					//假如打开ios下载后开始======================
					// setTimeout(function() {
					// 	location.href =
					// 		'vtgou://params'; //ios协议启动地址
					// }, 96);
					// //延迟执行 如果1s没响应，就表示你手机中没有该app。就可以去下载了
					// setTimeout(function() {
					// 	let ua = window.navigator.userAgent.toLowerCase()
					// 	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					// 		that.hintShow = true;
					// 	} else {
					// 		if (Date.now() - t < 1200) {
					// 			//打开应用商城地址
					// 			// let model_type = 1;
					// 			// let update_type = 0;
					// 			// getAppConfig(model_type, update_type).then((res) => {
					// 			// 	let data = res.data[0];
					// 			// 	window.location = data;
					// 			// })
					// 		}
					// 	}
					// }, 1001);
					//假如打开ios下载后结束==================================
				}
				// #endif
			}
		}
	}
</script>
<style lang="scss">
	page{
		background:#fff;
	}
	.downLoadBox {
		background: #fff;
		position: relative;
		box-sizing: border-box;
		text-align: center;
		height: auto;

		.downLoadBack {
			width: 100%;
			height: 488rpx;
			background: url(/static/images/download_back2.png) no-repeat;
			background-size: 100% 100%;
			position: relative;

			.downloadIcon {
				width: 200rpx;
				height: 200rpx;
				position: absolute;
				bottom: 68rpx;
				left: 50%;
				transform: translateX(-50%);

				uni-image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.downLoadTxt {
			line-height: 143rpx;
			color: #666666;
			font-size: 28rpx;
		}

		.downLoad_back {
			width: 100%;
			height: 430rpx;
			background: url(/static/images/downLoad_back1.png) no-repeat;
			background-size: 100% 100%;
			margin-top: 105rpx;
			position: relative;

			>view {
				position: absolute;
				left: 50%;
				top: 153rpx;
				transform: translateX(-50%);

				.openButton {
					width: 348rpx;
					height: 90rpx;
					background: #8273F5;
					border-radius: 45rpx;
					line-height: 90rpx;
					font-size: 28rpx;
					color: #fff;
					margin-bottom: 37rpx;
				}

				.viewButton {
					width: 348rpx;
					height: 90rpx;
					border: 1px solid #565CAE;
					border-radius: 45rpx;
					color: #565CAE;
					line-height: 90rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.hint {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding-top: 156rpx;
		padding-left: 144rpx;
		background: url("") calc(100% - 32rpx) 12rpx/229rpx 178rpx no-repeat;
		font-weight: 500;
		font-size: 30rpx;
		line-height: 68rpx;
		color: #c1c1c1;
		background-color: rgba(0, 0, 0, 0.8);

		.iconfont {
			margin-left: 10rpx;
			font-weight: bold;
			font-size: 30rpx;
		}
	}
</style>
